<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信达数据中心运维管理自动化平台</title>
    <meta name="keywords" content="信达数据中心运维管理自动化平台">
    <meta name="description" content="信达数据中心运维管理自动化平台">
    <link rel="shortcut icon" href="../favicon.ico">
    <link href="../../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../../css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../../css/animate.css" rel="stylesheet">
    <link href="../../css/style.css?v=4.1.0" rel="stylesheet">
    <!-- Data Tables -->
    <link href="../../css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <style type="text/css">
        .input-xlarge {
            padding: 5px;
        }

        .control-group option {
            line-height: 30px;
            height: 30px;
            /*margin: 5px auto;*/
        }
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>资源总览</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-4 bdr">
                                <div class="echarts" id="echarts-bar"></div>
                            </div>
                            <div class="col-sm-4 bdr">
                                <div class="echarts" id="echarts-pie"></div>
                            </div>
                            <div class="col-sm-4">
                                <div class="echarts" id="echarts-line"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>资源TOP10列表</h5>
                    </div>
                    <div class="ibox-content fff">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="control-group mb15">
                                    <div class="controls">
                                        <select id="initTab" class="input-xlarge"></select>
                                    </div>
                                </div>
                                <table class="table table-striped table-bordered table-hover dataTables"
                                    style="width: 100%;">
                                    <thead>
                                        <tr>
                                            <th>序号</th>
                                            <th>业务系统</th>
                                            <th>主机名称</th>
                                            <th>IP地址</th>
                                            <th>CPU利用率</th>
                                            <th>内存利用率</th>
                                            <th>磁盘利用率</th>
                                            <th>网络利用率</th>
                                            <th>责任人</th>
                                        </tr>
                                    </thead>
                                    <tfoot>
                                        <tr>
                                            <th>序号</th>
                                            <th>业务系统</th>
                                            <th>主机名称</th>
                                            <th>IP地址</th>
                                            <th>CPU利用率</th>
                                            <th>内存利用率</th>
                                            <th>磁盘利用率</th>
                                            <th>网络利用率</th>
                                            <th>责任人</th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 基础js -->
    <script src="../../js/jquery.min.js?v=2.1.4"></script>
    <script src="../../js/bootstrap.min.js?v=3.3.6"></script>
    <script src="../../js/content.js?v=1.0.0"></script>
    <!-- 插件js -->
    <script src="../../js/plugins/echarts/echarts-all.js"></script>
    <script src="../../js/handlebars-v3.0.1.js"></script>
    <!-- Data Tables -->
    <script src="../../js/plugins/dataTables/jquery.dataTables.js"></script>
    <script src="../../js/plugins/dataTables/dataTables.bootstrap.js"></script>

    <script id="tpl" type="text/x-handlebars-template">

        {{! 初始化仪表盘集群 }}
        {{#each initTabInfo}}
        <option value="{{id}}">{{name}}</option>
        {{/each}}

    </script>

    <script type="text/javascript">
        $(function () {

            // ---------- Handlebars模板引擎 ---------- 
            var tpl = $("#tpl").html(); //用jquery获取模板
            var template = Handlebars.compile(tpl); //预编译模板

            // 柱状图
            var barOption;
            var barChart = echarts.init(document.getElementById("echarts-bar"));
            $.ajax({
                // url: 'http://192.168.0.82:8888/resView/allRes',
                url: '../../data/view_res/bar.json',
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    echartsBar(response.xAxisData, response.seriesData);
                    barChart.setOption(barOption);
                    $(window).resize(barChart.resize);
                }
            });
            function echartsBar(xAxisData, seriesData) {
                barOption = {
                    title: {
                        text: '资源总数',
                        textStyle: {
                            fontSize: 14
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: xAxisData,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#999', // X轴及其文字颜色
                            }
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#999', // X轴及其文字颜色
                            }
                        }
                    }],
                    series: [{
                        name: '数量',
                        type: 'bar',
                        barWidth: '60%',
                        data: seriesData,
                        itemStyle: {
                            //通常情况下：
                            normal: {
                                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                color: function (params) {
                                    var colorList = ['#65d186', '#f67287', '#f29e3c', '#c05bdd', '#7a65f2']; //每根柱子的颜色
                                    return colorList[params.dataIndex];
                                }
                            },
                            //鼠标悬停时：
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                };
            };

            // 饼状图
            var pieOption;
            var pieChart = echarts.init(document.getElementById("echarts-pie"));
            $.ajax({
                // url: 'http://192.168.0.82:8888/resView/typeArea',
                url: '../../data/view_res/pie.json',
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    echartsPie(response.legendData, response.seriesData);
                    pieChart.setOption(pieOption);
                    $(window).resize(pieChart.resize);
                }
            });
            function echartsPie(legendData, seriesData) {
                pieOption = {
                    title: {
                        text: '资源类型分布比例',
                        textStyle: {
                            fontSize: 14,
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 0,
                        top: '20%',
                        data: legendData
                    },
                    series: [{
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: seriesData,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                };
            };

            // 折线图
            var lineOption;
            var lineChart = echarts.init(document.getElementById("echarts-line"));
            $.ajax({
                // url: 'http://192.168.0.82:8888/resView/warnLine',
                url: '../../data/view_res/line.json',
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    echartsLine(response.legendData, response.xAxisData, response.seriesData);
                    lineChart.setOption(lineOption);
                    $(window).resize(lineChart.resize);
                }
            });
            function echartsLine(legendData, xAxisData, seriesData) {
                lineOption = {
                    title: {
                        text: '资源1周内告警发展趋势',
                        textStyle: {
                            fontSize: 14,
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        top: '10%',
                        data: legendData
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xAxisData
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: seriesData
                };
            };

            // 初始化Tab切换
            $.ajax({
                // url: 'http://192.168.0.82:8888/resView/select',
                url: '../../data/view_res/tab.json',
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    var initTabContext = { "initTabInfo": response };
                    var initTabInfo = template(initTabContext); //匹配json内容
                    $("#initTab").html(initTabInfo); //输入模板
                }
            });

            // 选择Tab切换表格
            var indexTab = 1;
            $("#initTab").change(function () {
                indexTab = $("option:selected").val();
                dataTableAjax(indexTab);
            });

            // 表格数据
            dataTableAjax(indexTab);
            function dataTableAjax(indexTab) {
                var ajaxUrl = '../../data/view_res/table' + indexTab + '.json';
                // var ajaxUrl = 'http://192.168.0.82:8888/resView/top?index=' + indexTab;
                var table = $('.dataTables').DataTable({
                    "bRetrieve": true,  // 是否允许从新生成表格
                    "dom": "Bfrtip",
                    "bLengthChange": false, //去掉每页显示多少条数据方法
                    "bFilter": false, //去掉搜索框方法三：这种方法可以,
                    "ajax": ajaxUrl,
                    "columns": [
                        { "data": "num" },
                        { "data": "sys" },
                        { "data": "host" },
                        { "data": "ip" },
                        { "data": "cpu" },
                        { "data": "memory" },
                        { "data": "disk" },
                        { "data": "net" },
                        { "data": "person" }
                    ]
                });
                table.ajax.url(ajaxUrl).load();
            }



        })
    </script>
</body>

</html>